import { useState } from 'react';
// import { Tree } from 'antd';
import { CarryOutOutlined, FormOutlined } from '@ant-design/icons';
import SortableTree from 'react-sortable-tree';
import FileExplorerTheme from 'react-sortable-tree-theme-file-explorer';
import axios from 'axios';

const initData = [
    {
        imports: [
            {
                antd: [
                    'Button',
                    'Switch'
                ]
            }
        ],
        title: 'div',
        componentName: 'div',
        children: [
            {
                title: 'div',
                componentName: 'div',
                children: [
                    { title: 'span', componentName: 'span', },
                ],
            },
        ],
    }
];

export default function ComponentTree() {

    const [expandedKeys, setExpandedKeys] = useState(['0-0-0']);
    const [treeData, setTreeData] = useState(initData);

    const onChange = (tree) => {
        console.log('tree', tree[0])
        setTreeData(tree);
        axios.post('http://192.168.0.117:8000/', tree[0])
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
    }

    return <>
        <h3>组件树</h3>
       
        <SortableTree
          treeData={treeData}
          onChange={onChange}
          theme={FileExplorerTheme}
          dndType={'Component'}
        />
    </>
}